<script setup lang="ts">
import { ref, reactive } from 'vue'
import {
  ElMessage,
  ElMessageBox,
  ElNotification,
  type ButtonType,
  type UploadFile,
} from 'element-plus'
import {
  House,
  InfoFilled,
  ArrowDown,
  ArrowUp,
  ArrowLeft,
  ArrowRight,
  Search,
  Edit,
  Delete,
  Calendar,
  Setting,
  User,
  Bell,
} from '@element-plus/icons-vue'

// 按钮示例数据
const buttons: { type: ButtonType; label: string }[] = [
  { type: 'default', label: '默认按钮' },
  { type: 'primary', label: '主要按钮' },
  { type: 'success', label: '成功按钮' },
  { type: 'warning', label: '警告按钮' },
  { type: 'danger', label: '危险按钮' },
  { type: 'info', label: '信息按钮' },
]

const icons = [
  { icon: House, label: 'House', color: '#409EFF' },
  { icon: InfoFilled, label: 'InfoFilled', color: '#67C23A' },
  { icon: ArrowDown, label: 'ArrowDown', color: '#E6A23C' },
  { icon: ArrowUp, label: 'ArrowUp', color: '#F56C6C' },
  { icon: ArrowLeft, label: 'ArrowLeft', color: '#909399' },
  { icon: ArrowRight, label: 'ArrowRight', color: '#9370DB' },
]

// 表单示例数据
const form = reactive({
  name: '',
  region: '',
  date: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const formRules = {
  name: [
    { required: true, message: '请输入活动名称', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
  ],
  region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  resource: [{ required: true, message: '请选择资源', trigger: 'change' }],
}

// 表格示例数据
const tableData = [
  {
    date: '2025-05-26',
    name: '张三',
    address: '北京市朝阳区芍药居',
    status: 'success',
  },
  {
    date: '2025-05-25',
    name: '李四',
    address: '上海市浦东新区金科路',
    status: 'warning',
  },
  {
    date: '2025-05-24',
    name: '王五',
    address: '广州市天河区天河路',
    status: 'info',
  },
  {
    date: '2025-05-23',
    name: '赵六',
    address: '深圳市南山区科技园',
    status: 'danger',
  },
]

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100,
})

// 对话框控制
const dialogVisible = ref(false)

// 抽屉控制
const drawerVisible = ref(false)

// 日期选择
const dateValue = ref('')
const dateTimeValue = ref('')
const dateRangeValue = ref([])

// 选择器数据
const options = [
  { value: 'option1', label: '选项1' },
  { value: 'option2', label: '选项2' },
  { value: 'option3', label: '选项3' },
  { value: 'option4', label: '选项4' },
  { value: 'option5', label: '选项5' },
]

const selectValue = ref('')
const multiSelectValue = ref([])

// 开关和滑块
const switchValue = ref(true)
const sliderValue = ref(50)

// 评分
const rateValue = ref(3.5)

// 颜色选择器
const colorValue = ref('#409EFF')

// 上传文件
const fileList = ref([])

// 标签页
const activeTab = ref('first')

// 消息提示方法
const showMessage = (type: string) => {
  const messageTypes = {
    success: () => ElMessage.success('这是一条成功消息'),
    warning: () => ElMessage.warning('这是一条警告消息'),
    info: () => ElMessage.info('这是一条消息提示'),
    error: () => ElMessage.error('这是一条错误消息'),
    box: () =>
      ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }),
    notify: () =>
      ElNotification({
        title: '通知',
        message: '这是一条通知消息',
        type: 'success',
        duration: 2000,
      }),
  }

  if (messageTypes[type as keyof typeof messageTypes]) {
    messageTypes[type as keyof typeof messageTypes]()
  }
}

// 步骤条
const activeStep = ref(1)
const steps = [
  { title: '步骤 1', description: '描述文本 1' },
  { title: '步骤 2', description: '描述文本 2' },
  { title: '步骤 3', description: '描述文本 3' },
  { title: '步骤 4', description: '描述文本 4' },
]

// 进度条
const progressValue = ref(70)

const handleRemove = (file: UploadFile) => {
  console.log(file)
}
const handlePictureCardPreview = (file: UploadFile) => {
  console.log(file)
}
</script>

<template>
  <div class="flex flex-col gap-6 p-4">
    <h1 class="text-2xl font-bold mb-4">Element Plus 组件示例</h1>

    <!-- 按钮组件 -->
    <el-card>
      <template #header>
        <div class="flex items-center justify-between">
          <span class="font-bold">按钮组件</span>
        </div>
      </template>
      <div class="flex flex-wrap gap-2">
        <el-button v-for="button in buttons" :key="button.type" :type="button.type">
          {{ button.label }}
        </el-button>
        <el-button link type="primary">链接按钮</el-button>
        <el-button v-for="ic in icons" :key="ic.label" :icon="ic.icon" circle :color="ic.color" />
      </div>
    </el-card>

    <!-- 表单组件 -->
    <el-card>
      <template #header>
        <div class="flex items-center justify-between">
          <span class="font-bold">表单组件</span>
        </div>
      </template>
      <el-form :model="form" :rules="formRules" label-width="120px">
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入活动名称" />
        </el-form-item>
        <el-form-item label="活动区域" prop="region">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai" />
            <el-option label="区域二" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间" prop="date">
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="即时配送" prop="delivery">
          <el-switch v-model="form.delivery" />
        </el-form-item>
        <el-form-item label="活动性质" prop="type">
          <el-checkbox-group v-model="form.type">
            <el-checkbox value="美食/餐厅线上活动" name="type">美食/餐厅线上活动</el-checkbox>
            <el-checkbox value="地推活动" name="type">地推活动</el-checkbox>
            <el-checkbox value="线下主题活动" name="type">线下主题活动</el-checkbox>
            <el-checkbox value="单纯品牌曝光" name="type">单纯品牌曝光</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源" prop="resource">
          <el-radio-group v-model="form.resource">
            <el-radio value="线上品牌商赞助">线上品牌商赞助</el-radio>
            <el-radio value="线下场地免费">线下场地免费</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式" prop="desc">
          <el-input v-model="form.desc" type="textarea" :rows="3" placeholder="请输入活动形式" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格组件 -->
    <el-card>
      <template #header>
        <div class="flex items-center justify-between">
          <span class="font-bold">表格组件</span>
        </div>
      </template>
      <el-table :data="tableData" style="width: 100%" stripe border>
        <el-table-column prop="date" label="日期" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="address" label="地址" />
        <el-table-column label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default>
            <el-button type="primary" size="small" :icon="Edit">编辑</el-button>
            <el-button type="danger" size="small" :icon="Delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-4 flex justify-end">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
    </el-card>

    <!-- 弹窗组件 -->
    <el-card>
      <template #header>
        <div class="flex items-center justify-between">
          <span class="font-bold">弹窗组件</span>
        </div>
      </template>
      <div class="flex flex-wrap gap-2">
        <el-button type="primary" @click="dialogVisible = true">打开对话框</el-button>
        <el-button type="primary" @click="drawerVisible = true">打开抽屉</el-button>
        <el-button type="success" @click="showMessage('success')">成功消息</el-button>
        <el-button type="warning" @click="showMessage('warning')">警告消息</el-button>
        <el-button type="info" @click="showMessage('info')">提示消息</el-button>
        <el-button type="danger" @click="showMessage('error')">错误消息</el-button>
        <el-button @click="showMessage('box')">确认框</el-button>
        <el-button @click="showMessage('notify')">通知</el-button>
      </div>

      <!-- 对话框 -->
      <el-dialog v-model="dialogVisible" title="提示" width="30%">
        <span>这是一段对话框的内容</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">确认</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 抽屉 -->
      <el-drawer v-model="drawerVisible" title="我是标题" direction="rtl" size="30%">
        <span>这是一段抽屉的内容</span>
      </el-drawer>
    </el-card>

    <!-- 导航组件 -->
    <el-card>
      <template #header>
        <div class="flex items-center justify-between">
          <span class="font-bold">导航组件</span>
        </div>
      </template>

      <!-- 标签页 -->
      <el-tabs v-model="activeTab" class="mb-4">
        <el-tab-pane label="用户管理" name="first">用户管理内容</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理内容</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理内容</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿内容</el-tab-pane>
      </el-tabs>

      <!-- 步骤条 -->
      <el-steps :active="activeStep" finish-status="success" class="mb-4">
        <el-step
          v-for="(step, index) in steps"
          :key="index"
          :title="step.title"
          :description="step.description"
        />
      </el-steps>
      <div class="flex justify-center gap-2 mb-4">
        <el-button @click="activeStep = Math.max(0, activeStep - 1)">上一步</el-button>
        <el-button type="primary" @click="activeStep = Math.min(steps.length, activeStep + 1)"
          >下一步</el-button
        >
      </div>

      <!-- 面包屑 -->
      <el-breadcrumb separator="/" class="mb-4">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 菜单 -->
      <el-menu mode="horizontal" default-active="1" class="mb-4">
        <el-menu-item index="1">
          <el-icon><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="2-1">用户列表</el-menu-item>
          <el-menu-item index="2-2">添加用户</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><Bell /></el-icon>
          <span>消息中心</span>
        </el-menu-item>
      </el-menu>
    </el-card>

    <!-- 数据展示组件 -->
    <el-card>
      <template #header>
        <div class="flex items-center justify-between">
          <span class="font-bold">数据展示组件</span>
        </div>
      </template>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- 标签 -->
        <div>
          <h3 class="mb-2 font-medium">标签</h3>
          <div class="flex flex-wrap gap-2">
            <el-tag>标签一</el-tag>
            <el-tag type="success">标签二</el-tag>
            <el-tag type="info">标签三</el-tag>
            <el-tag type="warning">标签四</el-tag>
            <el-tag type="danger">标签五</el-tag>
          </div>
        </div>

        <!-- 进度条 -->
        <div>
          <h3 class="mb-2 font-medium">进度条</h3>
          <el-progress :percentage="progressValue" />
          <el-progress :percentage="progressValue" status="success" />
          <el-progress :percentage="progressValue" status="warning" />
          <el-progress :percentage="progressValue" status="exception" />
        </div>

        <!-- 徽章 -->
        <div>
          <h3 class="mb-2 font-medium">徽章</h3>
          <div class="flex items-center gap-4">
            <el-badge :value="12" class="mr-4">
              <el-button>评论</el-button>
            </el-badge>
            <el-badge :value="3" type="primary">
              <el-button>回复</el-button>
            </el-badge>
            <el-badge :value="1" type="warning">
              <el-button>消息</el-button>
            </el-badge>
            <el-badge is-dot type="danger">
              <el-button>通知</el-button>
            </el-badge>
          </div>
        </div>

        <!-- 头像 -->
        <div>
          <h3 class="mb-2 font-medium">头像</h3>
          <div class="flex items-center gap-2">
            <el-avatar
              :size="50"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
            <el-avatar :size="40" icon="el-icon-user" />
            <el-avatar>用户</el-avatar>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 表单控件组件 -->
    <el-card>
      <template #header>
        <div class="flex items-center justify-between">
          <span class="font-bold">表单控件组件</span>
        </div>
      </template>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- 日期选择器 -->
        <div>
          <h3 class="mb-2 font-medium">日期选择器</h3>
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            class="w-full mb-2"
          />
          <el-date-picker
            v-model="dateTimeValue"
            type="datetime"
            placeholder="选择日期时间"
            class="w-full mb-2"
          />
          <el-date-picker
            v-model="dateRangeValue"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="w-full"
          />
        </div>

        <!-- 选择器 -->
        <div>
          <h3 class="mb-2 font-medium">选择器</h3>
          <el-select v-model="selectValue" placeholder="请选择" class="w-full mb-2">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="multiSelectValue" multiple placeholder="请选择" class="w-full">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <!-- 开关和滑块 -->
        <div>
          <h3 class="mb-2 font-medium">开关和滑块</h3>
          <div class="mb-4">
            <el-switch v-model="switchValue" />
            <el-switch
              v-model="switchValue"
              class="ml-2"
              style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
            />
          </div>
          <el-slider v-model="sliderValue" />
        </div>

        <!-- 评分和颜色选择器 -->
        <div>
          <h3 class="mb-2 font-medium">评分和颜色选择器</h3>
          <div class="mb-4">
            <el-rate v-model="rateValue" allow-half />
          </div>
          <el-color-picker v-model="colorValue" />
        </div>

        <!-- 上传 -->
        <div class="col-span-1 md:col-span-2">
          <h3 class="mb-2 font-medium">上传</h3>
          <el-upload action="#" list-type="picture-card" :auto-upload="false" :file-list="fileList">
            <el-icon><Calendar /></el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon><Search /></el-icon>
                  </span>
                  <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <el-icon><Delete /></el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.el-card {
  margin-bottom: 20px;
}
</style>
